<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>虚拟列表-1</title>
    <style>
        /* display的盒子高度为300px,背景色为pink */
        .display{
            height: 300px;
            /* background-color: pink; */
            /* overflow: auto; 的意思是，如果一个元素的内容超出了其指定的尺寸，那么该元素将会显示一个滚动条，以便用户可以滚动查看溢出的内容。如果内容没有超出元素的尺寸，则不会显示滚动条。 */
            overflow: auto;
        }
        /* scroll的盒子高度为1000px,背景色为yellow */
        .scroll{
            height: 1000px;
            /* background-color: yellow; */
        }
    </style>
</head>
<body>
    <!-- 类名为display的div -->
    <div class="display">
        <!-- 类名为scroll的div -->
        <div class="scroll">
            <!-- 类名为placeholder的div -->
            <div class="placeholder"></div>
            <!-- 类名为content的div -->
            <div class="content"></div>
        </div>
        <!--类名为content的div -->
    </div>
</body>
<script>
    // 监听display的滚动事件,求出scrollTop
    const display = document.querySelector('.display');
    display.addEventListener('scroll', (e) => {
        // 求出scrollTop
        // scrollTop是一个只读属性，返回或设置匹配元素的滚动条的垂直位置。
        // 这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的距离
        const scrollTop = e.target.scrollTop;
        const currentIndex = Math.floor(scrollTop / 30);
        //设置 content元素的文本内容为当前的currentIndex
        const placeholder = document.querySelector('.placeholder');
        //设置 placeholder的高度为currentIndex*30
        placeholder.style.height = currentIndex * 30 + 'px';
        //求一个1-1000的数组
        const arr = Array.from({ length: 1000 }, (_, i) => i + 1);
        //对数组进行切片,从currentIndex开始,取10个,命名为currentArr
        const currentArr = arr.slice(currentIndex, currentIndex + 10);
        // slice()接受的参数是一个索引值，表示从哪个位置开始提取原数组中的数据。它的第二个参数是一个索引值，表示到哪个位置前停止提取。但是，该方法并不会提取该位置的元素。
        //将currentArr渲染到content中
        const content = document.querySelector('.content');
        content.innerHTML = currentArr.map(item => `<div style="height: 30px;background-color: black;color:white;margin: 2px 0;">${item}</div>`).join('');
    });
</script>
</html>